<template>
	<div>
		<toMenu>
			<el-button type="primary" size="mini" @click="openclassifymanager">添加</el-button>
		</toMenu>
		<el-table :data="classifylist" style="width: 100%">
			<el-table-column prop="id" label="编号" width="180">
			</el-table-column>
			<el-table-column prop="value" label="用户名" width="180">
			</el-table-column>


			</el-table-column>
			<el-table-column align="center" label="操作">
				<template v-slot="scopt">
					<el-button type="primary" size="mini" @click="openeditorclassify(scopt.row)">编辑</el-button>
					<el-button type="danger" size="mini" @click="delclassify(scopt.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination background layout="prev, pager, next" :total="classifycount" @current-change="getclassifylist">
		</el-pagination>

		<el-dialog title="添加分类列表" :visible.sync="addclassifyrvisible" width="40%">
			<el-form :model="classify" label-width="80px" ref="addformdom">
				<el-form-item label="用户名" :rules="[ { required: true, message: '请输入用户名', trigger: 'blur' }]">
					<el-input v-model="classify.classifyName" placeholder="请输入用户名"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addclassifyrvisible = false">取 消</el-button>
				<el-button type="primary" @click="addclassify( 'addformdom')">确 定</el-button>

			</span>
		</el-dialog>









		<el-dialog title="修改分类列表" :visible.sync="editorclassifyvisible" width="40%">
			<el-form :model="eclassify" label-width="80px" ref="editorformdom">
				<el-form-item label="用户名" :rules="[ { required: true, message: '请输入用户名', trigger: 'blur' }]">
					<el-input v-model="eclassify.classifyName" placeholder="请输入用户名"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editorclassifyvisible = false">取 消</el-button>
				<el-button type="primary" @click="editorclassify( 'editorformdom')">确 定</el-button>

			</span>
		</el-dialog>
	</div>

</template>
















<script>
	import toMenu from "../../components/tomenu.vue"
	export default {
		name: "manager",
		components: {
			toMenu
		},
		data() {
			return {
				classifylist: [],
				classifycount: 0,
				addclassifyrvisible: false,
				editorclassifyvisible: false,
				classify: {
					classifyName: ""
				},
				eclassify: {
					id: "",
					classifyName: ""
				}
			}
		},
		mounted() {
			this.getclassifylist(1);
		},
		methods: {

			openclassifymanager() {
				this.addclassifyrvisible = true
			},
			openeditorclassify(getdata) {
				console.log(getdata);
				this.eclassify = getdata;
				this.editorclassifyvisible = true
			},

			editorclassify(getform) {
				var _this = this;
				this.$refs[getform].validate((valid) => {
					if (valid) {
						_this.$http({
							method: 'post',
							url: '/api/v1/classifyUpdate',
							data: _this.eclassify
						}).then(function(res) {
							console.log(res)
							_this.$message({
								message: res.data.info,
								type: 'success',
								duction: 1000
							})
							_this.editorclassifyvisible = false;
							_this.getclassifylist(1);
						})
					} else {
						_this.$message({
							message: res.data.info,
							type: 'error',
							duction: 1500
						})
					}
				});
			},

			delclassify(id) {
				var _this = this;
				_this.$http({
					url: "/api/v1/classifyDel",
					method: "post",
					data: {
						id: id,
					}
				}).then(function(res) {
					if (res.data.code == 201) {
						_this.$message({
							message: res.data.info,
							type: "error",
							duration: 1500
						})
					} else {
						_this.$message({
							message: res.data.info,
							type: "success",
							duration: 1000,
							onClose: function() {
								_this.getclassifylist(1);
								_this.editorclassifyvisible = false
							}
						})
					}
				})
			},
			addclassify(getform) {
				var _this = this;
				this.$refs[getform].validate((valid) => {
					if (valid) {
						_this.$http({
							method: 'post',
							url: '/api/v1/classifyAdd',
							data: _this.classify
						}).then(function(res) {
							//console.log(res)
							if (res.data.code == 201) {
								_this.$message({
									message: res.data.info,
									type: "error",
									duration: 1500
								})
							} else {
								_this.$message({
									message: res.data.info,
									type: "success",
									duration: 1000,
									onClose: function() {
										_this.getclassifylist(1);
										_this.addclassifyrvisible = false
									}
								})
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			getclassifylist(getpage) {
				var _this = this;

				_this.$http.get('/api/v1/classifyList', {
					headers: {
						token: JSON.parse(sessionStorage.getItem("member")).token
					},
					params: {
						pageSize: 10,
						pageNum: getpage
					}
				}).then(function(res) {
					console.log(res);
					if (res.data.code == 200) {
						_this.classifylist = res.data.data.classifyList
						_this.classifycount = res.data.data.count
					}
				})
			}
		}
	}
</script>

<style>
</style>
